<template>
  <div class="relative overflow-hidden" :class="containerClass">
    <!-- 占位符 -->
    <div 
      v-if="!isLoaded" 
      class="absolute inset-0 bg-background-800 animate-pulse"
      :class="placeholderClass"
    ></div>
    
    <!-- 实际图片 -->
    <img
      :src="src"
      :alt="alt"
      :class="imageClass"
      @load="handleLoad"
      @error="handleError"
      loading="lazy"
    />
    
    <!-- 加载错误占位符 -->
    <div 
      v-if="hasError" 
      class="absolute inset-0 bg-background-700 flex items-center justify-center"
      :class="errorClass"
    >
      <svg class="w-8 h-8 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  src: string
  alt: string
  containerClass?: string
  imageClass?: string
  placeholderClass?: string
  errorClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  containerClass: 'w-full h-full',
  imageClass: 'w-full h-full object-cover',
  placeholderClass: 'w-full h-full',
  errorClass: 'w-full h-full'
})

const isLoaded = ref(false)
const hasError = ref(false)

const handleLoad = () => {
  isLoaded.value = true
  hasError.value = false
}

const handleError = () => {
  hasError.value = true
  isLoaded.value = false
}
</script> 